<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <title>测试题页面</title>
    <script src="/jquery-3.6.0.js"></script>
    <script src="/layui/layui.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <style>
        .list {
            display: none;
        }

        #id-1 {
            display: inline;
        }
    </style>
</head>
<!--进入页面直接加载id=1的题目-->
<body>
<!--进度条-->
<div class="layui-progress" lay-filter="progressBarFilter">
    <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
<div style="margin-left: 20%">

    <!--题目表单-->
    <input id="testerId" style="display: none" th:value="${tester}!=null?${tester.id}:'非法访问'">
    <input id="count" style="display: none" th:value="${questionList.size()}">
    <div th:each="question,temp:${questionList}">
        <div class="list" th:id="'id-'+${temp.count}">
            <label class="layui-font-20" th:text="${temp.count}+':'+${question.question}"></label>
            <form class="layui-form">
                <div class="layui-form-item">
<!--                    <div class="layui-input-block">-->
                        <input type="radio" class="check" lay-filter="option" th:id="'A:'+${temp.count}"
                               th:name="${question.id}"
                               th:title="${question.optionA}" value="A">
<!--                    </div>-->
<!--                    <div class="layui-input-block">-->
                        <input type="radio" class="check" lay-filter="option" th:id="'B:'+${temp.count}"
                               th:name="${question.id}"
                               th:title="${question.optionB}" value="B">
<!--                    </div>-->
<!--                    <div class="layui-input-block">-->
                        <input type="radio" class="check" lay-filter="option" th:id="'C:'+${temp.count}"
                               th:name="${question.id}"
                               th:title="${question.optionC}" value="C">
<!--                    </div>-->
<!--                    <div class="layui-input-block">-->
                        <input type="radio" class="check" lay-filter="option" th:id="'D:'+${temp.count}"
                               th:name="${question.id}"
                               th:title="${question.optionD}" value="D">
<!--                    </div>-->
                </div>
            </form>
        </div>
    </div>
    <form class="layui-form" action="" style="display: none" id="addResult" lay-filter="addResultFormFilter">
        <input  type="text" name="answer" class="layui-input" disabled>
        <div class="layui-input-block">
            <button type="button" id="submit" class="layui-btn" lay-submit lay-filter="submit">立即提交
            </button>
        </div>
    </form>
</div>
</body>
<script>
    if ($("#testerId").val() === '非法访问') {
        window.location.href = '/unau.html';
    }
    layui.use(['element', 'layer', 'form'], function () {
        let element = layui.element;
        let layer = layui.layer;
        let form = layui.form;
        let resultList = [];
        let answers=[];
        form.on('radio(option)', function (data) {
            let result = new Object();
            let index = parseInt(data.elem.id.split(":")[1]);
            let count = $("#count").val();
            result.result = data.value;
            answers[index] = data.value
            result.testerId = $("#testerId").val();
            result.questionId = data.elem.name;
            resultList.push(result);
            if (resultList.length == count) {
                form.val('addResultFormFilter',{
                    answer:answers.join(",")
                })
                layer.open({
                    title: '提交答案',
                    type: 1,
                    area: ['400px', '300px'],
                    offset: '200px',
                    content: $("#addResult"),
                    closeBtn:0
                });
                form.on('submit(submit)', function () {
                    $.ajax({
                        url: "/result/insert",
                        type: "post",
                        data: JSON.stringify(resultList),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (result) {
                            if (result.code == 0) {
                                window.location.href = "/showResultOne?id="+$("#testerId").val();
                            } else {
                                layer.msg(result.msg, {icon: 5});
                            }
                        }
                    })
                })
            } else {
                $("#id-" + index).hide();
                $("#id-" + (index + 1)).show();
                $(".check").each(function (index, el) {
                    el.checked = false;
                })
                form.render('radio');
            }
            element.progress('progressBarFilter', (index / count * 100) + '%');
        })
    })
</script>
</html>